* {
  outline: none !important;
}

.clearfix::after {
  content: "";
  display: block;
  clear: both;
}

.btn-light:not(:disabled):not(.disabled).active:focus,
.btn-light:not(:disabled):not(.disabled):active:focus,
.btn-light:not(:disabled):not(.disabled).active:hover,
.btn-light:not(:disabled):not(.disabled):active:hover,
.show>.btn-light.dropdown-toggle:focus {
  box-shadow: 0 0 0 0.2rem rgba(216, 217, 219, .5);
}

.btn-light:not(:disabled):not(.disabled).active:focus,
.btn-light:not(:disabled):not(.disabled):active:focus,
.btn-light:not(:disabled):not(.disabled):hover,
.btn-light:not(:disabled):not(.disabled):hover,
.show.btn-light.dropdown-toggle {
  color: #212529;
  background-color: #dae0e5 !important;
  border-color: #d3d9df !important;
}


/* ****** ***************************************************** ****** */
/* ****** https://www.bootcss.com/p/headroom.js/playroom/ 演示页 ****** */
/* ****** ***************************************************** ****** */
.header--fixed {
  position: fixed;
  z-index: 10;
  right: 0;
  left: 0;
  top: 0
}

.headroom-animated {
  -webkit-animation-duration: .5s;
  -moz-animation-duration: .5s;
  -o-animation-duration: .5s;
  animation-duration: .5s;
  -webkit-animation-fill-mode: both;
  -moz-animation-fill-mode: both;
  -o-animation-fill-mode: both;
  animation-fill-mode: both;
  /* transition: all .2s ease-in-out; */
}

/* 特效一: 滑动 slide */
@-webkit-keyframes slideDown {
  0% {
    -webkit-transform: translateY(-4em)
  }

  100% {
    -webkit-transform: translateY(0)
  }
}

@-moz-keyframes slideDown {
  0% {
    -moz-transform: translateY(-4em)
  }

  100% {
    -moz-transform: translateY(0)
  }
}

@-o-keyframes slideDown {
  0% {
    -o-transform: translateY(-4em)
  }

  100% {
    -o-transform: translateY(0)
  }
}

@keyframes slideDown {
  0% {
    transform: translateY(-4em)
  }

  100% {
    transform: translateY(0)
  }
}

.headroom-animated.slideDown {
  -webkit-animation-name: slideDown;
  -moz-animation-name: slideDown;
  -o-animation-name: slideDown;
  animation-name: slideDown
}

@-webkit-keyframes slideUp {
  0% {
    -webkit-transform: translateY(0)
  }

  100% {
    -webkit-transform: translateY(-4em)
  }
}

@-moz-keyframes slideUp {
  0% {
    -moz-transform: translateY(0)
  }

  100% {
    -moz-transform: translateY(-4em)
  }
}

@-o-keyframes slideUp {
  0% {
    -o-transform: translateY(0)
  }

  100% {
    -o-transform: translateY(-4em)
  }
}

@keyframes slideUp {
  0% {
    transform: translateY(0)
  }

  100% {
    transform: translateY(-4em)
  }
}

.headroom-animated.slideUp {
  -webkit-animation-name: slideUp;
  -moz-animation-name: slideUp;
  -o-animation-name: slideUp;
  animation-name: slideUp
}

/* 特效二: 摇摆 swing */
@-webkit-keyframes swingInX {
  0% {
    -webkit-transform: perspective(400px) rotateX(-90deg)
  }

  100% {
    -webkit-transform: perspective(400px) rotateX(0deg)
  }
}

@-moz-keyframes swingInX {
  0% {
    -moz-transform: perspective(400px) rotateX(-90deg)
  }

  100% {
    -moz-transform: perspective(400px) rotateX(0deg)
  }
}

@-o-keyframes swingInX {
  0% {
    -o-transform: perspective(400px) rotateX(-90deg)
  }

  100% {
    -o-transform: perspective(400px) rotateX(0deg)
  }
}

@keyframes swingInX {
  0% {
    transform: perspective(400px) rotateX(-90deg)
  }

  100% {
    transform: perspective(400px) rotateX(0deg)
  }
}

.headroom-animated.swingInX {
  -webkit-transform-origin: top;
  -moz-transform-origin: top;
  -ie-transform-origin: top;
  -o-transform-origin: top;
  transform-origin: top;
  -webkit-backface-visibility: visible !important;
  -webkit-animation-name: swingInX;
  -moz-backface-visibility: visible !important;
  -moz-animation-name: swingInX;
  -o-backface-visibility: visible !important;
  -o-animation-name: swingInX;
  backface-visibility: visible !important;
  animation-name: swingInX
}

@-webkit-keyframes swingOutX {
  0% {
    -webkit-transform: perspective(400px) rotateX(0deg)
  }

  100% {
    -webkit-transform: perspective(400px) rotateX(-90deg)
  }
}

@-moz-keyframes swingOutX {
  0% {
    -moz-transform: perspective(400px) rotateX(0deg)
  }

  100% {
    -moz-transform: perspective(400px) rotateX(-90deg)
  }
}

@-o-keyframes swingOutX {
  0% {
    -o-transform: perspective(400px) rotateX(0deg)
  }

  100% {
    -o-transform: perspective(400px) rotateX(-90deg)
  }
}

@keyframes swingOutX {
  0% {
    transform: perspective(400px) rotateX(0deg)
  }

  100% {
    transform: perspective(400px) rotateX(-90deg)
  }
}

.headroom-animated.swingOutX {
  -webkit-transform-origin: top;
  -webkit-animation-name: swingOutX;
  -webkit-backface-visibility: visible !important;
  -moz-animation-name: swingOutX;
  -moz-backface-visibility: visible !important;
  -o-animation-name: swingOutX;
  -o-backface-visibility: visible !important;
  animation-name: swingOutX;
  backface-visibility: visible !important
}

/* 特效三: 轻弹 flip */
@-webkit-keyframes flipInX {
  0% {
    -webkit-transform: perspective(400px) rotateX(90deg);
    opacity: 0
  }

  100% {
    -webkit-transform: perspective(400px) rotateX(0deg);
    opacity: 1
  }
}

@-moz-keyframes flipInX {
  0% {
    -moz-transform: perspective(400px) rotateX(90deg);
    opacity: 0
  }

  100% {
    -moz-transform: perspective(400px) rotateX(0deg);
    opacity: 1
  }
}

@-o-keyframes flipInX {
  0% {
    -o-transform: perspective(400px) rotateX(90deg);
    opacity: 0
  }

  100% {
    -o-transform: perspective(400px) rotateX(0deg);
    opacity: 1
  }
}

@keyframes flipInX {
  0% {
    transform: perspective(400px) rotateX(90deg);
    opacity: 0
  }

  100% {
    transform: perspective(400px) rotateX(0deg);
    opacity: 1
  }
}

.headroom-animated.flipInX {
  -webkit-backface-visibility: visible !important;
  -webkit-animation-name: flipInX;
  -moz-backface-visibility: visible !important;
  -moz-animation-name: flipInX;
  -o-backface-visibility: visible !important;
  -o-animation-name: flipInX;
  backface-visibility: visible !important;
  animation-name: flipInX
}

@-webkit-keyframes flipOutX {
  0% {
    -webkit-transform: perspective(400px) rotateX(0deg);
    opacity: 1
  }

  100% {
    -webkit-transform: perspective(400px) rotateX(90deg);
    opacity: 0
  }
}

@-moz-keyframes flipOutX {
  0% {
    -moz-transform: perspective(400px) rotateX(0deg);
    opacity: 1
  }

  100% {
    -moz-transform: perspective(400px) rotateX(90deg);
    opacity: 0
  }
}

@-o-keyframes flipOutX {
  0% {
    -o-transform: perspective(400px) rotateX(0deg);
    opacity: 1
  }

  100% {
    -o-transform: perspective(400px) rotateX(90deg);
    opacity: 0
  }
}

@keyframes flipOutX {
  0% {
    transform: perspective(400px) rotateX(0deg);
    opacity: 1
  }

  100% {
    transform: perspective(400px) rotateX(90deg);
    opacity: 0
  }
}

.headroom-animated.flipOutX {
  -webkit-animation-name: flipOutX;
  -webkit-backface-visibility: visible !important;
  -moz-animation-name: flipOutX;
  -moz-backface-visibility: visible !important;
  -o-animation-name: flipOutX;
  -o-backface-visibility: visible !important;
  animation-name: flipOutX;
  backface-visibility: visible !important
}

/* 特效四: 跳动 bounce */
@-webkit-keyframes bounceInDown {
  0% {
    opacity: 0;
    -webkit-transform: translateY(-200px)
  }

  60% {
    opacity: 1;
    -webkit-transform: translateY(30px)
  }

  80% {
    -webkit-transform: translateY(-10px)
  }

  100% {
    -webkit-transform: translateY(0)
  }
}

@-moz-keyframes bounceInDown {
  0% {
    opacity: 0;
    -moz-transform: translateY(-200px)
  }

  60% {
    opacity: 1;
    -moz-transform: translateY(30px)
  }

  80% {
    -moz-transform: translateY(-10px)
  }

  100% {
    -moz-transform: translateY(0)
  }
}

@-o-keyframes bounceInDown {
  0% {
    opacity: 0;
    -o-transform: translateY(-200px)
  }

  60% {
    opacity: 1;
    -o-transform: translateY(30px)
  }

  80% {
    -o-transform: translateY(-10px)
  }

  100% {
    -o-transform: translateY(0)
  }
}

@keyframes bounceInDown {
  0% {
    opacity: 0;
    transform: translateY(-200px)
  }

  60% {
    opacity: 1;
    transform: translateY(30px)
  }

  80% {
    transform: translateY(-10px)
  }

  100% {
    transform: translateY(0)
  }
}

.headroom-animated.bounceInDown {
  -webkit-animation-name: bounceInDown;
  -moz-animation-name: bounceInDown;
  -o-animation-name: bounceInDown;
  animation-name: bounceInDown
}

@-webkit-keyframes bounceOutUp {
  0% {
    -webkit-transform: translateY(0)
  }

  30% {
    opacity: 1;
    -webkit-transform: translateY(20px)
  }

  100% {
    opacity: 0;
    -webkit-transform: translateY(-200px)
  }
}

@-moz-keyframes bounceOutUp {
  0% {
    -moz-transform: translateY(0)
  }

  30% {
    opacity: 1;
    -moz-transform: translateY(20px)
  }

  100% {
    opacity: 0;
    -moz-transform: translateY(-200px)
  }
}

@-o-keyframes bounceOutUp {
  0% {
    -o-transform: translateY(0)
  }

  30% {
    opacity: 1;
    -o-transform: translateY(20px)
  }

  100% {
    opacity: 0;
    -o-transform: translateY(-200px)
  }
}

@keyframes bounceOutUp {
  0% {
    transform: translateY(0)
  }

  30% {
    opacity: 1;
    transform: translateY(20px)
  }

  100% {
    opacity: 0;
    transform: translateY(-200px)
  }
}

.headroom-animated.bounceOutUp {
  -webkit-animation-name: bounceOutUp;
  -moz-animation-name: bounceOutUp;
  -o-animation-name: bounceOutUp;
  animation-name: bounceOutUp
}


/* ****** ***************************************************** ****** */
/* ****** ***************** loader animation ***************** */
/* ****** ***************************************************** ****** */
@keyframes loaderSpin {
  0% {
    -webkit-transform: rotate(0deg);
    transform: rotate(0deg);
  }

  50% {
    -webkit-transform: rotate(360deg);
    transform: rotate(360deg);
  }

  100% {
    -webkit-transform: rotate(1080deg);
    transform: rotate(1080deg);
  }
}

@-webkit-keyframes loaderSpin {
  0% {
    -webkit-transform: rotate(0deg);
  }

  50% {
    -webkit-transform: rotate(360deg);
  }

  100% {
    -webkit-transform: rotate(1080deg);
  }
}

@keyframes loaderPulse {
  0% {
    background-color: rgba(101, 91, 230, 0.2);
  }

  13% {
    background-color: rgba(101, 91, 230, 0.2);
  }

  15% {
    background-color: rgba(101, 91, 230, 0.9);
  }

  28% {
    background-color: rgba(101, 91, 230, 0.9);
  }

  30% {
    background-color: rgba(101, 91, 230, 0.2);
  }

  43% {
    background-color: rgba(101, 91, 230, 0.2);
  }

  45% {
    background-color: rgba(101, 91, 230, 0.9);
  }

  70% {
    background-color: rgba(101, 91, 230, 0.9);
  }

  74% {
    background-color: rgba(101, 91, 230, 0.2);
  }

  100% {
    background-color: rgba(101, 91, 230, 0.9);
  }
}

@-webkit-keyframes loaderPulse {
  0% {
    background-color: rgba(101, 91, 230, 0.2);
  }

  13% {
    background-color: rgba(101, 91, 230, 0.2);
  }

  15% {
    background-color: rgba(101, 91, 230, 0.9);
  }

  28% {
    background-color: rgba(101, 91, 230, 0.9);
  }

  30% {
    background-color: rgba(101, 91, 230, 0.2);
  }

  43% {
    background-color: rgba(101, 91, 230, 0.2);
  }

  45% {
    background-color: rgba(101, 91, 230, 0.9);
  }

  70% {
    background-color: rgba(101, 91, 230, 0.9);
  }

  74% {
    background-color: rgba(101, 91, 230, 0.2);
  }

  100% {
    background-color: rgba(101, 91, 230, 0.9);
  }
}

@keyframes loaderBorderPulse {
  0% {
    -webkit-box-shadow: 0 0 0 0 white, 0 0 0 1px rgba(101, 91, 230, 0.8);
    box-shadow: 0 0 0 0 white, 0 0 0 1px rgba(101, 91, 230, 0.8);
  }

  40% {
    -webkit-box-shadow: 0 0 0 1px white, 0 0 0 2px rgba(101, 91, 230, 0.8);
    box-shadow: 0 0 0 1px white, 0 0 0 2px rgba(101, 91, 230, 0.8);
  }

  80% {
    -webkit-box-shadow: 0 0 0 3px #ffffff, 0 0 1px 3px rgba(101, 91, 230, 0.8);
    box-shadow: 0 0 0 3px #ffffff, 0 0 1px 3px rgba(101, 91, 230, 0.8);
  }
}

@-webkit-keyframes loaderBorderPulse {
  0% {
    -webkit-box-shadow: 0 0 0 0 white, 0 0 0 1px rgba(101, 91, 230, 0.8);
    box-shadow: 0 0 0 0 white, 0 0 0 1px rgba(101, 91, 230, 0.8);
  }

  40% {
    -webkit-box-shadow: 0 0 0 1px white, 0 0 0 2px rgba(101, 91, 230, 0.8);
    box-shadow: 0 0 0 1px white, 0 0 0 2px rgba(101, 91, 230, 0.8);
  }

  80% {
    -webkit-box-shadow: 0 0 0 3px #ffffff, 0 0 1px 3px rgba(101, 91, 230, 0.8);
    box-shadow: 0 0 0 3px #ffffff, 0 0 1px 3px rgba(101, 91, 230, 0.8);
  }
}